import { LogoutOutlined, DotChartOutlined } from '@ant-design/icons'
import { Avatar, Button, Dropdown, Tooltip } from "antd"

import { useNavigate } from 'react-router-dom'

import { objectArrHas } from '../../Utils'
import { GetIndexedDB, PutIndexedDB } from '../../Utils/IndexedDB'
import { themeStore, pageStore, modelStore } from '../../Config/zustand'

import { UserAvatar, OptionsNavMapping, UserDropdownNavMapping } from '../../Config/theme'
import { useMount } from 'ahooks'
import { useState } from 'react'


const { port } = window.location

const optionsMapping = {
    SetSystem: '系统设置',
    SetUserInfo: '用户设置',
    SetChart: '临时图表'
}

const HeadA01 = () => {
    const { head } = themeStore()
    const { pageList, updateActive, updateList } = pageStore()
    const { updateModel } = modelStore()
    const [UserInfo, setUserInfo] = useState({})
    const [startStutas, setStartStutas] = useState(false)

    const onNavigate = useNavigate()

    const { optionsList } = head
    const { title, fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = head
    const { backSize, backColor, backRadio, backIndex, backShadowX, backShadowY, backShadowS, backShadowB } = head
    const { iconSize, iconColor, iconShadowX, iconShadowY, iconShadowS, iconShadowB } = head
    const { toolBack, toolColor, toolFamily, toolWeight, toolStyle, toolSize, toolShadowX, toolShadowY, toolShadowS, toolShadowB } = head

    const { userList, userIsSignOut } = head
    const { trigger, userRoleIsOut, userNameIsOut, userAvatarIsIn, shape } = head
    const { roleColor, roleFamily, roleWeight, roleStyle, roleSize, roleShadowX, roleShadowY, roleShadowS, roleShadowB } = head
    const { nameColor, nameFamily, nameWeight, nameStyle, nameSize, nameShadowX, nameShadowY, nameShadowS, nameShadowB } = head

    const titleStyle = {
        color: fontColor,
        fontFamily: fontFamily,
        fontWeight: fontWeight,
        fontStyle: fontStyle,
        fontSize: fontSize,
        filter: `drop-shadow(${fontShadowX}px ${fontShadowY}px ${fontShadowS}px ${fontShadowB})`
    }

    const optionsBack = {
        background: backColor,
        width: backSize,
        height: backSize,
        borderRadius: backRadio,
        marginLeft: backIndex,
        boxShadow: `${backShadowX}px ${backShadowY}px ${backShadowS}px ${backShadowB}`,
        '--iconSize': iconSize + 'px',
        '--iconColor': iconColor,
        '--iconShadowX': iconShadowX + 'px',
        '--iconShadowY': iconShadowY + 'px',
        '--iconShadowS': iconShadowS + 'px',
        '--iconShadowB': iconShadowB,
    }

    const OptionsToolStyle = {
        '--toolColor': toolColor,
        '--toolFamily': toolFamily,
        '--toolWeight': toolWeight,
        '--toolStyle': toolStyle,
        '--toolSize': toolSize + 'px',
        '--toolShadowX': toolShadowX + 'px',
        '--toolShadowY': toolShadowY + 'px',
        '--toolShadowS': toolShadowS + 'px',
        '--toolShadowB': toolShadowB
    }

    const RoleNameStyle = {
        color: roleColor,
        fontFamily: roleFamily,
        fontWeight: roleWeight,
        fontStyle: roleStyle,
        fontSize: roleSize,
        filter: `drop-shadow(${roleShadowX}px ${roleShadowY}px ${roleShadowS}px ${roleShadowB})`,
        height: roleSize,
        lineHeight: roleSize + 'px'
    }

    const UserNameStyle = {
        color: nameColor,
        fontFamily: nameFamily,
        fontWeight: nameWeight,
        fontStyle: nameStyle,
        fontSize: nameSize,
        filter: `drop-shadow(${nameShadowX}px ${nameShadowY}px ${nameShadowS}px ${nameShadowB})`,
        height: nameSize,
        lineHeight: nameSize + 'px'
    }

    const onOptionsFunc = (key) => {
        switch (key) {
            case 1: onSwitchPage('/Start/Home'); break;
            case 8: onSwitchPage('/'); break;
            case 9:
                updateModel({ title: '微信绑定', type: 'WeChatBind', width: 480 })
                break;
            case 10:
                const obj = [...pageList, { key: 'SetCharts', label: '临时图表设置', url: 'SetCharts' }]
                updateActive('SetCharts')
                updateList(obj)
                break;
            case 11:
                updateModel({ title: '修改密码', type: 'ModifyPossword', width: 480 })
                break;
            case 12:
                updateModel({ title: '公众号绑定', modalType: 'model', type: 'Additional', width: 600, data: { type: 'OfficialAccount' } })
                break;
            default: console.log('未知操作', key); break;
        }
    }

    const onSwitchPage = (page) => onNavigate(page)

    const onAvatarFunc = async (key) => {
        if (!objectArrHas(pageList, key, 'key')) {
            const obj = [...pageList, { key: key, label: optionsMapping[key], url: key, icon: 'shou' }]
            updateList(obj)
        }
        await PutIndexedDB('openKey', key)
        updateActive(key)
    }

    useMount(async () => {
        const user = await GetIndexedDB('user')
        const menu = await GetIndexedDB('menu')
        const startStutas = menu.findIndex(item => item.uuid === '00000000-0000-0000-0000-000000000001') !== -1
        setStartStutas(startStutas)
        setUserInfo(user)
    })

    return (
        <div className='HeadA01'>
            <div style={titleStyle}>{title} (当前公司 : {UserInfo.organizationName})</div>
            <div className='userBox'>
                <div className='options'>
                    {optionsList.map(key => {
                        const item = OptionsNavMapping.find(v => v.value === key)
                        if (startStutas === false && key === 1) return false
                        return (
                            <Tooltip key={key} overlayClassName='Admin__Head__Options' overlayStyle={OptionsToolStyle} title={item.label} placement="bottom" color={toolBack}>
                                <div className='icon' style={optionsBack} onClick={() => onOptionsFunc(key)}>{item.icon}</div>
                            </Tooltip>
                        )
                    })}
                    {port &&
                        <Tooltip overlayClassName='Admin__Head__Options' overlayStyle={OptionsToolStyle} title='临时图表' placement="bottom" >
                            <div className='icon' style={optionsBack} onClick={() => onOptionsFunc(10)}>
                                <DotChartOutlined />
                            </div>
                        </Tooltip>
                    }

                </div>
                <Dropdown
                    trigger={[trigger]}
                    dropdownRender={() => {
                        return (
                            <div className='HeadA01__UserInfo'>
                                <div className='UserInfo'>
                                    {userAvatarIsIn && <Avatar shape={shape} size={48} src={UserAvatar['AvatarA17']} />}
                                    <div>
                                        <div style={RoleNameStyle}>{UserInfo.roleName}</div>
                                        <div style={UserNameStyle}>{UserInfo.userName}</div>
                                    </div>
                                </div>
                                {userList.length !== 0 &&
                                    <div className='Options'>
                                        {userList.map(key => {
                                            const item = UserDropdownNavMapping.find(v => v.value === key)
                                            return <div className='Downnav' key={key} onClick={() => onAvatarFunc(key)}>{item.label}</div>
                                        })}
                                    </div>
                                }
                                {userIsSignOut &&
                                    <div className='SignOut'>
                                        <Button type='primary' danger onClick={() => onSwitchPage('/')}>退出登录 <LogoutOutlined /></Button>
                                    </div>
                                }
                            </div>
                        )
                    }}
                >
                    <div className='userInfo'>
                        <Avatar shape={shape} size={48} src={UserAvatar['AvatarA17']} />
                        <div>
                            {userRoleIsOut && <div className='NameBox' style={RoleNameStyle}>{UserInfo.roleName}</div>}
                            {userNameIsOut && <div className='NameBox' style={UserNameStyle}>{UserInfo.userName}</div>}
                        </div>
                    </div>
                </Dropdown>
            </div>
        </div>
    )
};

export default HeadA01